<template>
  <div class="show-slider">
    <ul class="show-image">
      <li
        class="first"
        v-for="(item, index) in swiperList"
        :key="index"
        :class="index === currIndex ? 'show' : 'hide'"
        @click="toTravel(item)"
      >
        <router-link tag="a" class="show-pic" to="">
          <img :src="item.imgUrl" alt="" />
        </router-link>
        <router-link tag="a" class="show-title dark" to="">
          <div class="date">
            <span class="day">{{ item.time | formatDay }}</span>
            /{{ item.time | formatMonAndYear }}
          </div>
          <h3>{{ item.title }}</h3>
        </router-link>
        <p class="show-info">
          图片来自于<font color="#ff9900">{{ item.info.address }}</font
          >，此目的地共收藏了<font color="#ff9900">{{ item.info.imgsNum }}</font
          >张<font color="#ff9900">{{ item.info.address }}</font
          >图片。本片由<font color="#ff9900">{{ item.info.author }}</font
          >荣誉出品！
        </p>
      </li>
    </ul>
    <ul class="show-nav">
      <li
        v-for="(item, index) in swiperList"
        :key="index"
        @click="selectImg(index)"
        :class="{ active: currIndex === index }"
      >
        <router-link to="" tag="a">
          <img :src="item.smallImg" height="62" width="110" alt="" />
          <span></span>
        </router-link>
      </li>
    </ul>
    <router-link to="/llzm" tag="a" class="show-more"> 历历在目 </router-link>

    <div class="centerEle">
      <div>
        <el-radio-group v-model="radio" fill="#ff9e00">
          <el-radio :label="3">全部</el-radio>
          <el-radio :label="2">酒店</el-radio>
          <el-radio :label="9">目的地</el-radio>
          <el-radio :label="10">去旅行</el-radio>
          <el-radio :label="6">机票</el-radio>
        </el-radio-group>
      </div>

      <div class="input">
        <input
          class="input1"
          v-if="radio == 3 || radio == 9 || radio == 10"
          type="text"
          placeholder="搜索目的地/攻略/酒店/旅行特价"
        />
        <div v-else-if="radio == 2">
          <el-input style="width: 138px" placeholder="北京"></el-input>
          <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>

          <el-date-picker
            v-model="value3"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div v-else class="xxxxxxxxx">
          <el-input style="width: 138px" placeholder="北京"></el-input>
          <el-input style="width: 138px" placeholder="到达城市"></el-input>
          <el-date-picker
            v-model="value5"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <i class="icon2"></i>
        </div>
        <a href="#"><i class="icon"></i></a>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDay, formatMonAndYear } from "@/utils/filter";
import api from "@/api/index";
export default {
  data() {
    return {
      currIndex: 0,
      ivTimer: null,
      swiperList: [],
      radio: 3,
      value2: "",
      value3: "",
      value5: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      api.getSliderListInfo().then((res) => {
        console.log("轮播数据==>>", res);
        this.swiperList = res.sliderList;
      });
    },
    selectImg(index) {
      this.currIndex = index;
    },
    sliderTimer() {
      this.currIndex = (this.currIndex + 1) % this.swiperList.length;
    },
    toTravel(item) {
      this.$router.push({ name: "travels", params: item });
    },
  },
  mounted() {
    this.ivTimer = setInterval(this.sliderTimer, 10000);
  },
  filters: {
    formatDay,
    formatMonAndYear,
  },
  beforeDestroy() {
    clearInterval(this.ivTimer);
  },
};
</script>

<style lang="scss" scoped>
.icon2 {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 7px;
  left: 123px;
  background-image: url(~@/assets/images/wKgEaVy1QDmAJy1YAAAC0ZrtOdM370.png);
  background-size: 100%;
}
.show-slider {
  position: relative;
  overflow: hidden;
  background-color: #f1f4f5;
  height: calc((100vw / 3));
  min-width: 1200px;
}
.show-image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 2;
}
.first {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.8s ease;
}
.first.show {
  opacity: 1;
}
.first.hide {
  opacity: 0;
}
.first .show-pic {
  display: block;
  height: 100%;
}
.first .show-pic img {
  width: 100%;
  margin: 0;
}

.show-title {
  position: absolute;
  top: 65px;
  font-size: 20px;
  left: 50%;
  margin-left: -500px;
  color: #fff;
  text-align: left;
  width: 1000px;
}
.show-title h3 {
  font-size: 20px;
  font-weight: normal;
}
.show-title .date {
  font-size: 20px;
  position: relative;
  width: 180px;
  overflow: hidden;
  line-height: 34px;
}
.show-title .date .day {
  font-size: 30px;
}

.show-info {
  position: absolute;
  left: 50%;
  bottom: 20px;
  min-width: 630px;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  text-align: left;
  white-space: nowrap;
  margin-left: -269px;
}
.show-info font {
  cursor: pointer;
}

.show-nav {
  position: absolute;
  right: 40px;
  top: 45%;
  margin-top: -166px;
  width: 110px;
  z-index: 2;
}
.show-nav li {
  height: 62px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
.show-nav li:first-child {
  border-radius: 0 5px 0 0;
}
.show-nav li.active span {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #ff9d00;
  width: 106px;
  height: 58px;
  overflow: hidden;
}

.show-more {
  position: absolute;
  z-index: 2;
  right: 40px;
  top: 50%;
  width: 110px;
  height: 35px;
  margin-top: 160px;
  background-position: -60px -50px;
  line-height: 200px;
  overflow: hidden;
}

.centerEle {
  width: 38%;
  height: 70px;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3;
  padding: 10px;
  color: #fff;
}
.centerEle .input {
  display: flex;
  margin-top: 10px;
  margin-right: 2px;
}
.centerEle .input1 {
  width: 85%;
  padding-left: 23px;
  border-radius: 4px;
  border: none;
  outline-style: none;
}
/deep/.centerEle input {
  width: 98%;
}
.centerEle a {
  background-color: #ff9d00;
  height: 36px;
  width: 10%;
  margin: 0 5px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centerEle a .icon {
  background-image: url(~@/assets/images/header-sprites13.png);
  display: inline-block;
  width: 24px;
  height: 24px;
  background-position: 0 -110px !important;
  overflow: hidden;
  vertical-align: top;
}
/deep/.el-radio {
  color: #fff;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #ff9d00;
  background: #ff9d00;
  color: #fff;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #fff;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
.xxxxxxxxx {
  position: relative;
}
</style>
